<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大屏渲染</title>
  <link rel="stylesheet" href="../static/css/atom.css">
</head>

<body>
  <div id="container"></div>

  <script type="importmap">
        {
          "imports": {
            "three": "../three/v170/three.module.min.js",
            "three/addons/": "../three/v170/"
          }
        }
      </script>

  <script type="module">
    import * as THREE from 'three';
    import { CSS2DRenderer, CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
    import { CSS3DRenderer, CSS3DObject } from "three/addons/renderers/CSS3DRenderer.js";
    import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    import { DragControls } from 'three/addons/controls/DragControls.js';
    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

    console.log(`[THREE版本]`, THREE.REVISION);

    let camera, scene, renderer;
    let controls;

    init();
    animate();

    function init() {
      const container = document.getElementById('container');
      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);
      camera.position.set(500, 500, 500);

      scene = new THREE.Scene();

      const geometry = new THREE.BoxGeometry(200, 200, 200);
      const textureLoader = new THREE.TextureLoader();

      /* const material = new THREE.MeshBasicMaterial({
          color: 0xff00ff,// 颜色
      });
      const cube = new THREE.Mesh(geometry, material); */

      // 6个面设置不同的颜色
      const materials = [
        new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 红色
        new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 绿色
        new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 蓝色
        new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 黄色
        new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 品红色
        new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 青色
      ];
      const cube = new THREE.Mesh(geometry, materials);
      scene.add(cube);

      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xADD8E6, 1);// 设置背景颜色
      container.appendChild(renderer.domElement);

      controls = new OrbitControls(camera, renderer.domElement);// 添加控制器
      controls.enablePan = true;// 添加平移功能

      var axesHelper = new THREE.AxesHelper(1000);
      scene.add(axesHelper);// 创建坐标轴辅助对象

      const gui = new GUI();

      // 定义下拉框选项
      const options = [
        { name: 'aa', value: '123' },
        { name: 'bb', value: '456' }
      ];
      const control = {
        selectedValue: options[0].name // 默认选择第一个值
      };
      gui.add(control, 'selectedValue', options.map(option => option.name)).name('选择项').onChange((value) => {
        const selectedOption = options.find(option => option.name === value);
        console.log('选择的名称:', selectedOption.value);
      });

    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
  </script>

</body>

</html>